<template>
	<view class="page" style="padding-bottom: 50rpx;">
		<topVue title="申请换货"></topVue>
		<view class="produceVue flex align-center padding30 margin10" v-for="(item, index) in orderDetial.items" :key="index" @click="selectId=item.id; selectPrice=item.price;">
			<image src="../../static/selected.png" style="width: 40rpx; height: 40rpx; margin-right: 30rpx;" v-if="selectId==item.id"></image>
			<image src="../../static/select.png" style="width: 40rpx; height: 40rpx; margin-right: 30rpx;" v-else></image>
			<view class="picVue">
				<image :src="item.picUrl" style="width: 100%; height: 100%;"></image>
			</view>
			<view class="flex-column padding-row20 flex-between" style="height: 130rpx">
				<view class="name">{{item.spuName}}</view>
				<view class="kg">
					<text style="color: #454545; padding-right: 20rpx;" v-for="(o, i) in item.properties">{{o.valueName}}</text>
				</view>
				<view class="price">{{item.price/100}}</view>
			</view>
		</view>

		<view class="box margin20 padding30">
			<view class="label">换货原因</view>
			<u-gap height="20"></u-gap>
			<view class="select flex-between align-center margin0 padding-row30" @click="show = true">
				<text>{{ applyReason || "请选择退货原因" }}</text>
				<image src="../../static/more.png" style="width: 32rpx; height: 32rpx;"></image>
			</view>
			<textarea placeholder="请详细描述问题，以便我们更好地为您服务" v-model="text"></textarea>
		</view>
		
		<view class="box margin20" style="padding: 30rpx 30rpx 0;">
			<view class="label">上传凭证(最多6张)</view>
			<view class="inner flex-wrap flex">
				<view class="item borderVue flex-column align-center flex-center" v-if="imgs.length<9" @click="chooseFun()">
					<image src="../../static/camera.png" style="width: 46rpx; height: 46rpx;"></image>
					<u-gap height="20"></u-gap>
					<text style="color: #6B7280;line-height: 1; font-size: 24rpx;">添加</text>
				</view>
				<view class="item" v-for="(item, index) in imgs" :key="index" @click="removeFun(item)">
					<image :src="item" style="width: 100%; height: 100%;"></image>
				</view>
			</view>
		</view>
		<!-- <view class="box margin20 padding30">
			<view class="label">换货方式</view>
			<view class="pays flex-wrap margin20">
				<view class="pay flex align-center padding-row20" :class="{active: payWay===0}" @click="payWay=0">
					<image src="../../static/selected.png" style="width: 38rpx; height: 38rpx;" v-if="payWay===0"></image>
					<image src="../../static/select.png" style="width: 38rpx; height: 38rpx;" v-else></image>
					<view class="flex-column flex-1 padding-row20">
						<text style="color: #4B5563; line-height: 1; font-weight: 600;">寄件点自寄</text>
						<u-gap height="20"></u-gap>
						<text style="color: #6B7280; line-height: 1;">附近寄件点寄件</text>
					</view>
				</view>
				<view class="pay flex align-center padding-row20" :class="{active: payWay===1}" @click="payWay=1">
					<image src="../../static/selected.png" style="width: 38rpx; height: 38rpx;" v-if="payWay===1"></image>
					<image src="../../static/select.png" style="width: 38rpx; height: 38rpx;" v-else></image>
					<view class="flex-column flex-1 padding-row20">
						<text style="color: #4B5563; line-height: 1; font-weight: 600;">上门取件</text>
						<u-gap height="20"></u-gap>
						<text style="color: #6B7280; line-height: 1;">快递上门取件</text>
					</view>
				</view>
			</view>
		</view> -->
		
		<view class="loginBtn margin50" @click="submit()">提交</view>
		
		<u-popup v-model="show" mode="bottom">
			<view class="popupVue">
				<view class="item" v-for="(item, index) in options" :key="index" @click="selectReason(item)">{{item.label}}</view>
				<u-gap height="20" bg-color="#f5f5f5"></u-gap>
				<view class="item" @click="show=false">取消</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import baseUrl from "@/common/url.js"
	export default {
		data(){
			return {
				quantity: 1,
				imgs: [],
				text: "",
				payWay: 0,
				orderId: "",
				orderDetial: {},
				applyReason: "",
				reasonId: "",
				options: [],
				show: false,
				selectId: "",
				selectPrice: 0
			}
		},
		
		async onLoad(option) {
			this.orderId = option.id
			await this.getDetail()
			await this.getType()
		},
		
		methods: {
			async getDetail(){
				const res = await this.$request("/app-api/trade/order/get-detail","GET",{
					id: this.orderId
				})
				if(res.code===0) {
					this.orderDetial = res.data
					console.log("订单详情", this.orderDetial)
				}
			},
			
			selectReason(item){
				this.applyReason = item.label
				this.reasonId = item.id
				this.show = false
			},
			
			async getType(){
				const res = await this.$request("/app-api/system/dict-data/type","GET",{
					type: "trade_after_sale_way_reason_30"
				})
				if(res.code===0) {
					this.options = res.data
					console.log(res)
				}
			},
			
			async submit(){
				if(!this.selectId) return this.$u.toast("请选择换货商品")
				if(!this.text) return this.$u.toast("请详细描述问题")
				if(!this.reasonId) return this.$u.toast("请选择退货原因")
				if(this.imgs.length===0) return this.$u.toast("请至少上传一张凭证")
				const result = await this.$request("/app-api/trade/after-sale/create", "POST", {
					orderItemId: this.selectId,
					way: 30,
					refundPrice: this.selectPrice,
					applyReason: this.applyReason,
					applyDescription: this.text,
					applyPicUrls: this.imgs
				})
				
				if(result.code===0) {
					this.$u.toast("申请成功")
					setTimeout(()=>{
						this.$tools.back(2)
					}, 1000)
				}else{
					this.$u.toast(result.msg)
				}
			},
			
			chooseFun(){
				this.$utils.choose(1).then(res=>{
					console.log(res.tempFilePaths)
					let tempFilePath = res.tempFilePaths[0]
					var token = uni.getStorageSync('token');
					console.log(token)
					var files=[];
					files.push({'name':'file','uri':tempFilePath});
					uni.uploadFile({
						url:baseUrl.url + '/app-api/infra/file/upload', //仅为示例，非真实的接口地址
						files:files,
						formData: {
							file: tempFilePath,
							path: "avatar/",
						},
						header: {
							"tenant-id": 162,
							Authorization: token,
						},
						success: (result) => {
							var data=JSON.parse(result.data);
							console.log(data)
							this.imgs.push(data.data)
							// console.log(this.imgs)
						},
						fail(err) {	
							console.log(err)
						}
					})
				})
			},
			
			removeFun(item){
				this.imgs = this.imgs.filter(ver=>{
				    return item != ver
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.popupVue {
		width: 100%;
		.item {
			width: 100%;
			height: 88rpx;
			border-bottom: 1rpx solid #f5f5f5;
			line-height: 88rpx;
			text-align: center;
			color: #333;
			font-weight: 600;
		}
	}
	.produceVue {
		width: 690rpx;
		background: #fff;
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25), inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
		.picVue {
			width: 130rpx;
			height: 130rpx;
			background: #f5f5f5;
			border-radius: 15rpx;
		}
		.name {
			color: #333;
			font-weight: 600;
			line-height: 1;
		}
		.kg {
			color: #666;
			line-height: 1;
		}
		.price {
			color: #1CC289;
			font-weight: 600;
			line-height: 1;
		}
	}
	
	.box {
		width: 690rpx;
		background: #fff;
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25), inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
		.label {
			font-weight: 600;
			font-size: 30rpx;
			line-height: 1;
		}
		.select {
			width: 100%;
			height: 92rpx;
			border-radius: 16rpx;
			border: 1rpx solid #f5f5f5;
		}
		textarea {
			width: 690rpx;
			height: 200rpx;
			border: 1rpx solid #f5f5f5;
			border-radius: 15rpx;
			display: block;
			box-sizing: border-box;
			padding: 20rpx;
			font-size: 28rpx;
			color: #333;
			margin: 20rpx auto 0;
		}
		.pay {
			width: 100%;
			height: 120rpx;
			border: 1rpx solid #f5f5f5;
			border-radius: 14rpx;
			margin-bottom: 20rpx;
		}
		.pay:nth-child(3) {
			margin-bottom: 0;
		}
		.active {
			border: 1rpx solid #1CC289;
		}
		.inner {
			width: 100%;
			padding-top: 30rpx;
			.item {
				width: 190rpx;
				height: 190rpx;
				border-radius: 16rpx;
				margin-bottom: 30rpx;
				margin-right: 30rpx;
				overflow: hidden;
			}
			.item:nth-child(3n) {
				margin-right: 0;
			}
			.borderVue {
				border: #E5E7EB 1rpx dashed;
			}
		}
	}
	
	.loginBtn {
		width: 690rpx;
		height: 92rpx;
		background: linear-gradient(to right, #1CC289, #60A5FA);
		border-radius: 15rpx;
		line-height: 92rpx;
		text-align: center;
		color: #fff;
		font-size: 30rpx;
		font-weight: 600;
	}
</style>